<template>
  <div class="test-api">
    <h1>API连接测试</h1>
    
    <div class="test-section">
      <h2>测试获取单个事件</h2>
      <el-button @click="testGetEvent" type="primary">获取事件ID: 1</el-button>
      <div v-if="testEvent" class="event-display">
        <pre>{{ JSON.stringify(testEvent, null, 2) }}</pre>
      </div>
      <el-alert v-else-if="testEvent === false" type="error" title="获取失败" show-icon />
    </div>
    
    <div class="test-section">
      <h2>测试获取事件列表</h2>
      <el-button @click="testGetEvents" type="primary">获取所有事件</el-button>
      <div v-if="testEvents && testEvents.length > 0" class="events-display">
        <pre>{{ JSON.stringify(testEvents, null, 2) }}</pre>
      </div>
      <el-alert v-else-if="testEvents === false" type="error" title="获取失败" show-icon />
      <el-alert v-else-if="testEvents && testEvents.length === 0" type="warning" title="返回空数据" show-icon />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import api from '../api'
import { ElMessage } from 'element-plus'

export default {
  name: 'TestApi',
  setup() {
    const testEvent = ref(null)
    const testEvents = ref(null)
    
    const testGetEvent = async () => {
      try {
        ElMessage.info('正在请求事件详情...')
        const response = await api.get('/events/1')
        console.log('Event response:', response)
        testEvent.value = response
        ElMessage.success('获取成功！')
      } catch (error) {
        console.error('Failed to get event:', error)
        testEvent.value = false
        ElMessage.error('获取失败！')
      }
    }
    
    const testGetEvents = async () => {
      try {
        ElMessage.info('正在请求事件列表...')
        const response = await api.get('/events')
        console.log('Events response:', response)
        testEvents.value = response
        ElMessage.success(`获取成功！共 ${response.length} 条数据`)  
      } catch (error) {
        console.error('Failed to get events:', error)
        testEvents.value = false
        ElMessage.error('获取失败！')
      }
    }
    
    return {
      testEvent,
      testEvents,
      testGetEvent,
      testGetEvents
    }
  }
}
</script>

<style scoped>
.test-api {
  padding: 20px;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fafafa;
}

.event-display,
.events-display {
  margin-top: 20px;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  max-height: 400px;
  overflow-y: auto;
}

pre {
  white-space: pre-wrap;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  line-height: 1.4;
}

.el-button {
  margin-bottom: 15px;
}
</style>